<template>
  <div>
    <div class="v-align-c total-bar mar-t-20">
      <div class="flex-item text-align-c total-bar-item">
        <div class="font-28 font-w">{{countEntity.orderNum}}</div>
        <div class="font-16 mar-t-16 color-96">合计成交订单数</div>
      </div>
      <div class="flex-item text-align-c total-bar-item">
        <div class="font-28 font-w">{{countEntity.orderPrice}}</div>
        <div class="font-16 mar-t-16 color-96">合计成交金额</div>
      </div>
      <div class="flex-item text-align-c total-bar-item">
        <div class="font-28 font-w">{{countEntity.memberCommission}}</div>
        <div class="font-16 mar-t-16 color-96">合计店主收入</div>
      </div>
    </div>
    <div class="top-operate-default mar-t-20 mar-b-20">
      <div class="search-item">
        <label>搜索：</label>
        <el-select v-model="keywordType" placeholder="请选择">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
        </el-select>
        <el-input v-model="keyword" @keyup.enter.native="handleSearch" placeholder="店主昵称/姓名/手机号/所属招募员" style="width: 300px"></el-input>
        <label class="mar-l-20">时间筛选：</label>
        <el-date-picker
          v-model="starEndTime"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd HH:mm:ss"
          :default-time="['00:00:00', '23:59:59']"
          type="daterange"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <label class="mar-l-20">店主等级：</label>
        <el-select v-model="memberGradeId" placeholder="请选择" class="pad-l-10" style="width: 140px">
          <el-option label="全部" value=""></el-option>
          <el-option v-for="(item, index) in gradeList" :key="index" :label="item.gradeName" :value="item.memberGradeId">
          </el-option>
        </el-select>
        <label class="mar-l-20">来源：</label>
        <el-select v-model="memberNature" placeholder="请选择" class="pad-l-10" style="width: 140px">
          <el-option label="全部" value=""></el-option>
          <el-option label="总部招募" value="2"></el-option>
          <el-option label="招募员招募" value="1"></el-option>
        </el-select>
        <el-button-group>
          <el-button type="primary" @click="handleSearch" style="margin-left: 10px">查询</el-button>
          <el-button plain="" @click="resetSearch">重置</el-button>
        </el-button-group>
        <el-button class="mar-l-20" icon="el-icon-refresh" type="text" @click="resetSearch">更新数据</el-button>
      </div>
    </div>
    <!-- 内容列表 -->
    <div class="table-container mar-t-20">
      <div class="pad-t-15 pad-b-15">
        <el-button size="mini" plain @click="exportData">批量导出</el-button>
      </div>
      <el-table ref="multipleTable" :data="commissionList" v-loading="listLoading" element-loading-text="加载中" style="width: 100%" header-cell-class-name="default-header"
        row-class-name="default-row">
        <el-table-column type="index" width="60px" label="排名">
          <template slot-scope="scope">
            {{scope.$index + 1 + (searchListQuery.currentPage - 1) * searchListQuery.size}}
          </template>
        </el-table-column>
        <el-table-column width="480px" label="店主信息">
          <template slot-scope="scope">
            <div class="flex v-align-c cursor-p">
              <el-tooltip class="item" effect="dark" :content="'微客ID:' + scope.row.memberId" placement="top-start">
                <label><img :src="scope.row.memberAvatar" class="user-avatar cursor-p" v-if="scope.row.memberAvatar"></label>
              </el-tooltip>
              <div class="font-14 pad-l-10 height-59 line-h-14">
                <div><span class="font-color-9">昵称：</span>{{scope.row.memberNickname}}</div>
                <div><span class="font-color-9">姓名：</span>{{scope.row.memberRealName}}</div>
                <div><span class="font-color-9">手机：</span>{{scope.row.memberPhone}}</div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="来源">
          <template slot-scope="scope">
            <div v-if="scope.row.memberNature == 1">
              <div>招募员招募</div>
              <div>姓名：{{scope.row.recruiterName}}</div>
              <div>手机：{{scope.row.recruiterPhone}}</div>
            </div>
            <div v-else>总部招募</div>
          </template>
        </el-table-column>
        <el-table-column label="店主等级" prop="memberGradeName"></el-table-column>
        <el-table-column label="成交订单数" prop="orderNum">
          <template slot-scope="scope">
            <div><a style="color: #2d8cf0" @click="memberOrder(scope.row)">{{ scope.row.orderNum }}</a></div>
          </template>
        </el-table-column>
        <el-table-column label="成交订单金额" prop="orderPrice">
          <template slot-scope="scope">
            <div>￥{{ scope.row.orderPrice }}</div>
          </template>
        </el-table-column>
        <el-table-column label="获得收入" prop="memberCommission"></el-table-column>
      </el-table>
    </div>
    <!-- 列表分页 -->
    <div class="pagination">
      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
                      :current-page="searchListQuery.currentPage"
                      :page-sizes="[10, 20, 50, 100]" :page-size="searchListQuery.size"
                      layout="total, sizes, prev, pager, next, jumper"
                      :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<style lang="less" scoped>
  .user-avatar{
    width: 59px;
    height: 59px;
    display: block;
    border-radius: 50%;
  }
  .line-h-14{
    line-height: 1.4;
  }
</style>

<script>
  import { pagingMemberCommission, statMemberCommission } from '@/api/user/member'
  import { listMemberGrade } from '@/api/user/memberGrade'
  import { downloadFile } from '@/api/common/common'
  import elDragDialog from '@/directive/el-dragDialog' // base on element-ui

  export default {
    directives: {
      // 拖动窗口
      elDragDialog
    },
    filters: {
    },
    props: {
      memberId: {
        type: String
      }
    },
    data() {
      return {
        keywordType: 'memberNickname',
        keyword: '',
        options: [{
          value: 'memberNickname',
          label: '店主昵称'
        }, {
          value: 'memberRealName',
          label: '姓名'
        }, {
          value: 'memberPhone',
          label: '手机号'
        }, {
          value: 'recruiterName',
          label: '招募员姓名'
        }, {
          value: 'recruiterPhone',
          label: '招募员电话'
        }],
        gradeList: [],
        memberGradeId: '',
        memberNature: '',
        starEndTime: [],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        live: {},
        dict: {},
        searchListQuery: {
          currentPage: 1,
          size: 10
        },
        countEntity: {},
        activeName: '0',
        total: 0,
        commissionList: [],
        listLoading: false,
        applyStatus: 0
      }
    },
    // 初始化页面
    created() {
      this.listMemberGrade()
      this.initCount()
      this.handleSearch()
    },
    mounted() {
    },
    methods: {
      listMemberGrade() {
        listMemberGrade(this.getEnterpriseId()).then(response => {
          if (response.isError) return
          this.gradeList = response.data
        })
      },
      exportData() {
        downloadFile('/user/member/exportCommission', this.searchListQuery, '业绩排名.xlsx')
      },
      initCount() {
        statMemberCommission({ enterpriseId: this.getEnterpriseId() }).then(response => {
          if (response.isError) return
          this.countEntity = response.data
        })
      },
      handleClick() {
        this.handleSearch()
      },
      // 更改当前页数
      handleCurrentChange(val) {
        this.searchListQuery.currentPage = val
        this.searchEls()
      },
      // 更改当前页面大小
      handleSizeChange(val) {
        this.searchListQuery.size = val
        this.searchEls()
      },
      handleSearch() {
        this.searchListQuery.currentPage = 1
        this.searchEls()
      },
      searchEls() {
        this.listLoading = true
        this.searchListQuery = {
          currentPage: this.searchListQuery.currentPage,
          size: this.searchListQuery.size,
          enterpriseId: this.getEnterpriseId(),
          startTime: (this.starEndTime && this.starEndTime.length > 0 && this.starEndTime[0]) || '',
          endTime: (this.starEndTime && this.starEndTime.length > 1 && this.starEndTime[1]) || '',
          memberGradeId: this.memberGradeId,
          memberNature: this.memberNature
        }
        this.searchListQuery[this.keywordType] = this.keyword
        pagingMemberCommission(this.searchListQuery).then(response => {
          this.listLoading = false
          if (response.isError) return
          this.commissionList = response.data.records
          this.total = response.data.total
          this.dict = response.data.dict
        })
      },
      resetSearch() {
        this.starEndTime = []
        this.memberGradeId = ''
        this.memberNature = ''
        this.keyword = ''
        this.searchListQuery = {
          currentPage: 1,
          size: 10
        }
        this.handleSearch()
      },
      showDetail(row) {
        this.$router.push({ path: '/live/shop-live/detail/index', query: { entity: row }})
      },
      memberOrder(row) {
        let datePicker = []
        if (this.starEndTime && this.starEndTime.length > 1) {
          const startTime = this.datePicker[0].substring(0, 10) + ' 00:00:00'
          const endTime = this.datePicker[1].substring(0, 10) + ' 23:59:59'
          datePicker = [startTime, endTime]
        }
        this.$router.push({ path: '/order/order/index', query: { memberId: row.memberId, orderStatus: '80', startEndTime: datePicker, timeCol: 'payTime', showStatOrder: '0' }})
      }
    }
  }
</script>
